<template>
  <div class="classification">
    <el-select v-model="value" filterable placeholder="请选择图书类型" @change="typeChange" class="select">
      <el-option
        v-for="item in bType"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select><!--图书类型选择框-->
    <div class="list">
      <ul v-for="(book,index) in bookList" :key="index">
        <li  class="list_item">
          <div class="list_item_img">
            <img src= "../../assets/defalut_cover.jpg" alt="书籍封面" class="wr_bookCover_img">
          </div>
          <div class="list_item_content">
            <p class="list_item_name">{{ book.bName }}<span class="list_item_author"> &nbsp&nbsp&nbsp&nbsp&nbsp{{ book.bAuthor }}</span></p>
<!--            <p class="list_item_position">{{ book.bookSituation.bSituation }}:{{ book.situation }}</p>-->
            <p class="list_item_borrowCount">{{ book.borrowCount }} <span style="font-size:11px">人已借阅</span></p>
            <p class="list_item_"></p>
          </div>
        </li>
      </ul>
    </div><!--根据图书类型和页数显示图书列表-->
    <Pages @getInfo="getBook" class="page" :total="total" :pageSize="pageSize"></Pages><!--分页-->
  </div>
</template>

<script>
import { getBooks } from "../../api/home"
import Pages from "../../components/pages/Pages"
  export default {
    components:{
      Pages
    },
    data() {
      return {
        bookList: [], // 初始化书籍列表
        currentPage: 1, // 默认显示第一页
        pageSize: 5, // 每页显示五条
        total: 150, // 总数
        // bType: 1.悬疑恐怖类 2.情感类 3.科幻类 4.教育类 5.科学科技类 6.古典小说类
        types: ["悬疑恐怖类","情感类","科幻类","教育类","科学科技类","古典小说类"],
        bType: [{  // select选择器
          value: '悬疑恐怖类',
          label: '悬疑'
        }, {
          value: '情感类',
          label: '情感'
        }, {
          value: '科幻类',
          label: '科幻'
        }, {
          value: '教育类',
          label: '教育'
        }, {
          value: '古典小说类',
          label: '古典小说'
        }],
        value: '悬疑恐怖类', //select选择器初始化
        imgUrl: [] //图书地址数组
      }
    },
    mounted(){ // 初始化页面后调用
      this.getBook()
    },
    methods: {
      handleCurrentChange(val) { // 显示第几页
     //   this.currentPage=val // 改变默认的页数
        // 切换页码时，要获取每页显示的条数
        this.getBook()// 获取当前页数列表
      },
      typeChange () {
        this.getBook()
      },
      getBook (val){ // 从后端获取所有图书列表
        if(!val) val = 1
        let requestData = {
          pageNum:parseInt(val),
          bookType:this.value
        }
        getBooks(requestData).then(res=>{
            console.log("获取到的图书信息"+res);
            console.log(res)
          this.total = res.data.data.totalNum; // 总数
          this.bookList = res.data.data.datas; // 书籍列表
         /* for (var i = 0; i < this.bookList.length; i++){
            console.log("123");
             this.imgUrl[i] = "../assets/default_cover.jpg" //页面地址
          }*/
        }).catch(err=>{
          this.$messageOK("warning","获取图书信息失败！")
        })

      },
    },
  }
</script>
<style lang="scss" scoped>

.classification {
  width: 56%;
  height: 600px;
  height: auto;
  .select {
    margin-top: 10px;
    margin-left:20px ;
  }
  img {
    width: 50px;
    height: 72px;
  }
  li {
    margin-top: 10px;
    background: rgb(27, 28, 46);
    border-radius: 20px 20px 20px 20px;
    border: 2px solid rgb(117, 117, 117);
    height: 80px;
    opacity:70%;
  }
  .list_item_img {
    float: left;
    margin-left: 20px;
    .wr_bookCover_img {
      height: 65px;
      margin-top: 4px;
    }
  }
  .list_item_content {
    float: left;
    color: #111111;
    margin-left: 20px;
    .list_item_name {
      color: rgb(234, 236, 241);
      font-family: SimSun;
      font-size: 15px;
      line-height: 30px;
    }
    .list_item_author {
      color: rgb(124,126,129);
      font-family: Arial;
      font-size: 13px;
    }
    .list_item_position {
      color: rgb(125,119,123);
      font-family: Microsoft Yahei;
      font-size: 12px;
      line-height: 25px;
    }
    .list_item_borrowCount {
      color: rgb(127,127,127);
      font-family: STHeit;
      font-size: 14px;
    }
  }
  .page {
    margin-top: 10px;
    text-align:center
  }
}
</style>
